<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改css样式</title>
    <style>
        *{
            margin: 20px auto;
            padding: 0;
            text-align: center;
            font-size: 20px;

        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        .box2{
            background-color: yellow;
            width: 300px;
            height: 300px;
            background: url(./images/IMG_4.JPG) no-repeat center/cover;
            border-radius: 20px;
            border: 10px deepskyblue solid;
        }
        .box3{
            background-color: blue;
            opacity: 0.7;
            outline: 5px red dashed;
            box-shadow: 20px 20px 30px 30px rgba(0,0,0,0.8);

        }
    </style>
    <script>
        document.addEventListener("DOMContentLoaded",function(){
            const btn=document.querySelectorAll(".btn")[0]
            const box1=document.querySelectorAll(".box1")[0]
            console.log(btn)
            btn.addEventListener("click",function(){
                // 除了直接修改样式外，我们也可以通过修改class属性来间接的修改css样式
                // 新加了一个要修改的类，然后将这个类的css样式加给要修改的元素
                // box1.className+=" box2"

                /* 
                    通过class修改样式的好处
                        1.可以一次性修改多个样式
                        2.对JS和CSS进行解耦
                */

               /* 
                元素.classList是一个对象，对象中提供了当前元素的类的各种操作方法。

                1.元素.classList.add()                  向元素中添加1个或多个class.
                2.元素.classList.remove()               向元素中移除1个或多个class.
                3.元素.classList.toggle()               切换元素中某个class,就是如果原本有，就会切换为没有，如果没有，就会加上这个样式。
                4.元素.classList.replace("旧类"，"新类")     用新类去替换旧类
                5.元素.classlist.contain（）            检查元素里面是否包含该类,有就返回true,没有就是false
               */


                // box1.classList.add("box3","box2")    //就相当于box1.className+=" box2"
                // box1.classList.remove("box3")


                // 3.元素.classList.toggle() 切换元素中某个class,就是如果原本有，就会切换为没有，如果没有，就会加上这个样式。
                // box1.classList.toggle("box2")


                // 4.元素.classList.replace(旧类，新类)
                // box1.classList.add("box2")
                // box1.classList.replace("box2","box3")

                // 5.元素.classlist.contain（）
                    console.log(box1.classList.contains("box1"))


            })
        })
    </script>
</head>
<body>
    <button class="btn">按钮1</button>
    <hr>
    <div class="box1"></div>
</body>
</html>